<template>
  <div>
    <div style="margin-bottom: 20px">
      <RouterLink to="/manager/test">通过router跳转页面</RouterLink>
    </div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="router.push('/manager/test')">跳转到Test页面1</el-button>
      <el-button type="primary" @click="router.replace('/manager/test')">跳转到Test页面2</el-button>
    </div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="router.push('/manager/test?id=1&name=张三')">传递参数ID=1</el-button>
    </div>
    <div style="margin-bottom: 20px">
      <el-button type="primary" @click="router.push({ path:'/manager/test' ,query:{id:2,name:'张三'}})">传递参数ID=1
      </el-button>
    </div>

    <div style="margin-bottom: 20px">
      <el-input
          v-model="data.input"
          style="width: 240px"
          placeholder="请输入内容"
          clearable
          prefix-icon="Search"
      />
      {{ data.input }}
      <el-input style="width: 200px" :suffix-icon="Calendar"></el-input>
    </div>
    <div style="margin-bottom: 20px">
      <el-select
          v-model="data.value"
          multiple
          value-key="id"
          placeholder="请选择……"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-for="item in data.options"
            :key="item.id"
            :label="item.label"
            :value="item.name"
        />
      </el-select>
      {{ data.value }}
    </div>

    <div style="margin-bottom: 20px">
      <el-radio-group v-model="data.sex">
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
      <span style="margin-left: 50px">{{ data.sex }}</span>

      <el-radio-group v-model="data.tag" size="large">
        <el-radio-button label="我发布的内容" value="1"/>
        <el-radio-button label="我点赞的内容" value="2"/>
        <el-radio-button label="我收藏的内容" value="3"/>
      </el-radio-group>
    </div>
    <div style="margin-bottom: 20px">
      <el-checkbox-group v-model="data.checkList">
        <el-checkbox v-for="item in data.options" :key="item.id" :value="item.name" :label="item.label"/>
      </el-checkbox-group>
      <span style="margin-left: 20px">{{ data.checkList }}</span>
    </div>
    <div style="margin-bottom: 20px">
      <img src="@/assets/logo.svg" alt="" style="width: 100px">
      <el-image :src="img" style="width: 100px;margin-left: 100px"
                :preview-src-list="[img,'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg']"/>
    </div>
    <div style="margin-bottom: 20px">
      <el-carousel height="400px" style="width: 550px">
        <el-carousel-item v-for="item in data.imgs" :key="item">
          <img style="width: 100%;height: 400px" :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="margin-bottom: 20px">
      <el-date-picker
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          v-model="data.date"
          type="date"
          placeholder="请选择日期"
      />
      {{ data.date }}
      <el-date-picker
          style="margin-left: 10px"
          v-model="data.date1"
          type="datetime"
          placeholder="请选择日期时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
      />
      {{ data.date1 }}
      <el-time-picker
          style="margin-left: 20px"
          v-model="data.date2"
          placeholder="请选择时间"
          value-format="HH:mm:ss"
          format="HH:mm:ss"
      />
      {{ data.date2 }}
      <el-date-picker
          v-model="data.daterange"
          style="margin-left: 10px"
          type="daterange"
          range-separator="到"
          start-placeholder="起始月份"
          end-placeholder="终止月份"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
      />
      {{ data.daterange?.length ? data.daterange[0] : '' }} {{ data.daterange?.length ? data.daterange[1] : '' }}
    </div>
    <div style="margin-bottom: 20px">
      <el-table :data="data.tableData" style="width: 100%" stripe>
        <el-table-column prop="date" label="日期" width="180" header-align="center"/>
        <el-table-column prop="name" label="姓名" width="180" header-align="center"/>
        <el-table-column prop="address" label="地址" width="180" header-align="center"/>
        <el-table-column label="操作" header-align="center">
          <template #default="scope">
            <el-button type="primary" circle @click="edit(scope.row)">
              <el-icon>
                <Edit/>
              </el-icon>
            </el-button>
            <el-button type="danger" circle @click="del(scope.row.id)">
              <el-icon>
                <Delete/>
              </el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-bottom: 20px">
      <el-pagination
          v-model:current-page="data.currentPage"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.tableData.length"
      />
    </div>
    <el-dialog v-model="data.dialogVisible" title="编辑行对象" width="500">
      <div style="padding: 20px">
        <div style="margin-bottom: 10px">日期：{{ data.row.date }}</div>
        <div style="margin-bottom: 10px">名称：{{ data.row.name }}</div>
        <div>地址：{{ data.row.address }}</div>
      </div>
    </el-dialog>

  </div>
</template>
<script setup>
import {reactive} from "vue";
import {Search, Calendar, Delete, Edit} from "@element-plus/icons-vue";
import img from "@/assets/logo.svg"
import lun1 from "@/assets/img/lun1.jpg"
import lun2 from "@/assets/img/lun2.jpg"
import lun3 from "../assets/img/lun3.jpg"
import router from "@/router/index.js";

const del = (id) => {
  alert("删除ID=" + id + "的数据")
}

const data = reactive({
  input: "123",
  value: '',
  options: [{id: 1, label: '苹果', name: '苹果1'}, {id: 2, label: '西瓜', name: '西瓜'},
    {id: 3, label: '香蕉', name: '香蕉'}, {id: 4, label: '苹果', name: '苹果2'}],
  sex: "",
  tag: "",
  checkList: [],
  imgs: [lun1, lun2, lun3],
  date: '',
  date1: '',
  date2: '',
  daterange: null,
  tableData: [
    {id: '1', date: '2016-05-03', name: '张三', address: '浙江杭州',},
    {id: '2', date: '2016-05-03', name: '李四', address: '浙江衢州',},
    {id: '3', date: '2016-05-03', name: '王五', address: '甘肃陇南',},
  ],
  currentPage: 1,
  pageSize: 5,
  row: null,
  dialogVisible: false,
})
const edit = (row) => {
  data.row = row
  data.dialogVisible = true
}


</script>